<!doctype html>
<html lang="en">
<head>
  <title>Media Engagement</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
  <style>
    body {
      font-family: 'Roboto', 'Noto', sans-serif;
      font-size: 14px;
    }

    button {
      margin-bottom: 20px;
    }

    table {
      border-collapse: collapse;
      margin-bottom: 20px;
    }

    table td,
    table th {
      border: 1px solid #777;
      padding-inline-end: 4px;
      padding-inline-start: 4px;
    }

    table th {
      background: rgb(224, 236, 255);
      cursor: pointer;
      padding-bottom: 4px;
      padding-inline-end: 4px;
      padding-top: 4px;
      white-space: nowrap;
    }

    .engagement-bar {
      background-color: black;
      height: 2px;
    }

    .engagement-bar-cell {
      border: none;
    }

    .origin-cell {
      background-color: rgba(230, 230, 230, 0.5);
    }

    .visits-count-cell,
    .media-playbacks-count-cell,
    .last-playback-time-cell,
    .audible-playbacks-count-cell,
    .significant-playbacks-count-cell {
      background-color: rgba(230, 230, 230, 0.5);
      text-align: end;
      white-space: nowrap;
    }

    .base-score-input {
      border: 1px solid #ccc;
      border-radius: 2px;
      text-align: end;
      width: 70px;
    }

    .base-score-input:focus {
      border: 1px solid rgb(143, 185, 252);
      box-shadow: 0 0 2px rgb(113, 158, 206);
      outline: none;
    }

    .name-cell {
      background-color: rgba(230, 230, 230, 0.5);
    }

    table tr:hover {
      background: rgb(255, 255, 187);
    }

    th.sort-column {
      padding-inline-end: 16px;
    }

    th.sort-column::after {
      content: '▲';
      position: absolute;
    }

    th[sort-reverse].sort-column::after {
      content: '▼';
      position: absolute;
    }
  </style>
</head>
<body>
  <h1>Media Engagement</h1>
  <button id="copy-all-to-clipboard">Copy all to clipboard</button>
  <table>
    <thead>
      <tr id="config-table-header">
        <th>
          Setting Name
        </th>
        <th>
          Setting Value
        </th>
      </tr>
    </thead>
    <tbody id="config-table-body">
    </tbody>
  </table>
  <p>
    <label>
      <input id="show-no-playbacks" type="checkbox">
      Show sessions with no playbacks
    </label>
  </p>
  <table>
    <thead>
      <tr id="engagement-table-header">
        <th sort-key="origin">
          Origin
        </th>
        <th sort-key="visits" sort-reverse>
          Sessions
        </th>
        <th sort-key="mediaPlaybacks" sort-reverse>
          Sessions with playback
        </th>
        <th sort-key="lastMediaPlaybackTime" sort-reverse>
          Last Playback
        </th>
        <th sort-key="isHigh" sort-reverse>
          Is High
        </th>
        <th sort-key="totalScore" class="sort-column" sort-reverse>
          Score
        </th>
      </tr>
    </thead>
    <tbody id="engagement-table-body">
    </tbody>
  </table>

  <template id="datarow">
    <tr>
      <td class="origin-cell"></td>
      <td class="visits-count-cell"></td>
      <td class="media-playbacks-count-cell"></td>
      <td class="last-playback-time-cell"></td>
      <td class="is-high-cell"></td>
      <td class="total-score-cell"></td>
      <td class="engagement-bar-cell">
        <div class="engagement-bar"></div>
      </td>
    </tr>
  </template>
  <template id="configrow">
    <tr>
      <td class="name-cell"></td>
      <td></td>
    </tr>
  </template>
  <script type="module" src="media_engagement.js"></script>
</body>
</html>
